<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 <title>Jquery Lazy_load</title>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("img.lazy").lazyload({
		 effect : "fadeIn", 
		 effectspeed : 1000, //显示的动画时间为1秒
		 //threshold : 100, //图片距离出现到屏幕还有 100px 时,就开始加载.
		 //skip_invisible : false ,//插件默认对隐藏的图片不加载,如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .
		 //event : "click", //单击促发加载
		 //images/grey.gif	images/lazyload.gif  默认图片
	});
});
</script>
<style>
	img.lazy{
		background:url(images/loading.gif) no-repeat scroll center center transparent;
	}
</style>
</head>

<body style="text-align:center;">

    <img class="lazy" src="images/lazyload.gif" data-original="images/bmw_m1_hood.jpg" width="765" height="574">
    <img class="lazy" src="" data-original="images/bmw_m1_side.jpg" width="765" height="574">
    <img class="lazy" src="" data-original="images/viper_1.jpg" width="765" height="574">
    <img class="lazy" src="" data-original="images/viper_corner.jpg" width="765" height="574">
    <img class="lazy" src="" data-original="images/bmw_m3_gt.jpg" width="765" height="574">
    <img class="lazy" src="images/grey.gif" data-original="images/corvette_pitstop.jpg" width="765" height="574">

</body>
</html>